<template>
	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight()" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" title="我的订单">

		</uni-nav-bar>
		<view class="topView">
			<view class="topView1"></view>

			<view class="headerBox">
				<view class="headder">
					<view class="items" v-for="(item,index) in tabs" :class="currentIndex == item.id ? 'active':''"
						:key="index" @click="topTabClick(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>

			<u-tabs :current="tabsIndex" @click="tabClick" style="background-color: #FFFFFF00;" :list="tabsList"
				lineWidth="10" lineColor="#26D360" :activeStyle="{
												color: '#666666',
												
												transform: 'scale(1.05)'
											}" :inactiveStyle="{
												color: '#666666',
												transform: 'scale(1)'
											}" itemStyle="  height: 44px;width:19%;">
			</u-tabs>
			<!-- <view class="timeView flex-row-flex-start">
				<view class="time1">
					时间
				</view>
				<view class="time2">
					<text>2023-01-01</text>
					<text style="margin: 0 20rpx;">至</text>
					<text>2023-02-01</text>
				</view>
			</view> -->
			<block v-if="currentIndex == 0">
				<view v-for="(item,index) in list" :key="index">
					<view @click="itemClick(item)" class="orderView">
						<view class="flex-row-space-between">
							<view class="time">
								{{item.order_time}}
							</view>
							<view class="state">
								<!-- //状态:10=待接单 20=待司机达到(待到达乘客起点) 30=待出发,40=进行中,50=待支付(已到达乘客终点) 60=已完成,70=已取消 -->
								<text v-if="Number(item.order_status)==10" class="">待接单</text>
								<text v-if="Number(item.order_status)==70" class="state state1">已取消</text>
								<text v-if="Number(item.order_status)==60" class="state state2">已完成</text>
								<text
									v-if="Number(item.order_status)==20||Number(item.order_status)==30||Number(item.order_status)==40"
									class="">进行中</text>
								<text v-if="Number(item.order_status)==50" class="">待支付</text>

							</view>
						</view>

						<view class="flex-row-flex-start" style="margin-top: 20rpx;">
							<view class="circle1 ">

							</view>
							<view class="title2 flex1">
								{{item.start_address||'待定'}}
							</view>
						</view>
						<view class="flex-row-flex-start" style="margin-top: 20rpx;">
							<view class="circle ">

							</view>
							<view class="title2 flex1">
								{{item.end_address||'待定'}}
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="currentIndex == 1">
				<view v-for="(item,index) in list" :key="index">
					<view @click="itemClick(item)" class="orderView">
						<view class="flex-row-space-between">
							<view class="left">
								<view class="tag">
									出发
								</view>
								<view class="time">
									<!-- {{item.order_time}} -->
									{{item.departtime}}
								</view>
							</view>

							<view class="state">
								<!-- //状态:10=待接单 20=待司机达到(待到达乘客起点) 30=待出发,40=进行中,50=待支付(已到达乘客终点) 60=已完成,70=已取消 -->
								<!-- <text v-if="Number(item.order_status)==10" class="">待接单</text>
									<text v-if="Number(item.order_status)==70" class="state state1">已取消</text>
									<text v-if="Number(item.order_status)==60" class="state state2">已完成</text>
									<text v-if="Number(item.order_status)==20||Number(item.order_status)==30||Number(item.order_status)==40" class="">进行中</text>
									<text v-if="Number(item.order_status)==50" class="">待支付</text> -->
								<text v-if="Number(item.status)==1"  class="state1" style="color: #26D360;">已预订</text>
								<text v-if="Number(item.status)==2"  class="state1" style="color: #26D360;">进行中</text>
								<text v-if="Number(item.status)==3"  class="state1" style="color: #26D360;">已完成</text>
								<text v-if="Number(item.status)==4"  class="state1" style="color: #26D360;">已取消</text>
							</view>
						</view>

						<view class="flex-row-space-between">
							<view class="flex1">
								<view class="flex-row-flex-start" style="margin-top: 20rpx;">
									<view class="circle1 ">

									</view>
									<view class="title2 flex1">
										<!-- {{item.start_address||'待定'}} -->
										{{item.start_address}}
									</view>
								</view>
								<view class="flex-row-flex-start" style="margin-top: 20rpx;">
									<view class="circle ">

									</view>
									<view class="title2 flex1">
										<!-- {{item.end_address||'待定'}} -->
										{{item.end_address}} 
									</view>
								</view>
							</view>

						</view>
						<view class="flex-row-space-between" style="padding-top: 20rpx;">
							<view class="" style="font-size: 28rpx;color: #3D3D3D;">
								<text style="margin-right: 10rpx;" class="">预定座位：{{item.reserve}}位</text>
								<text style="color: red;" v-if="Number(item.type)==2">代下单</text>
								<text style="color: red;" v-if="Number(item.type)==1">被代下单</text>
							</view>
							<view class="" style="font-size: 28rpx;color: #3D3D3D;">
								<text class="">¥{{item.total_price}}</text>
							</view>
						</view>
						<view v-if="Number(item.status)==1" class="flex-row-space-between" style="padding-top: 20rpx;justify-content: flex-end;">
							<view class="rightbtn">
							<!-- 	<view class="cancel">
									联系车主
								</view> -->
								<view @click.stop='orderCancelClick(item)' class="cancel">
									取消订单
								</view>
								<!-- <view @click.stop='orderAboardClick(item)' class="done">
									确认上车
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="topView1"></view>



		</view>
	</view>
</template>

<script>

	import {
	orderCancel,//取消订单
	orderAboard,//确认上车
	
	} from '@/api/index.js'
	import {
		getOrderList,
		orderList,
	
	} from '@/api/personalCenter.js'
	export default {
		components: {

		},
		computed: {

		},
		data() {
			return {
				page: 1,
				size: 1000,
				tabsIndex: 0,
				currentIndex: 0,
				tabs: [{
					name: '短途',
					id: 0
				}, {
					name: '长途',
					id: 1
				}],
				tabsList: [{
						name: '全部',
						status: "全部"
					},
					{
						name: '待接单',
						status: "10"
					},

					{
						name: '进行中',
						status: "20"
					},
					{
						name: '待支付',
						status: "30"
					},
					{
						name: '已完成',
						status: "40"
					},
					{
						name: '已取消',
						status: "50"
					},

				],
				border: false,
				list: [],
				list2: [{
					datetime: '2024-01-09 12:30',
					chewei: '4',
					startCity: '郑州市',
					startAddress: '正弘西悦城',
					endCity: '洛阳市',
					endAddress: '正弘西悦城',
					desc: '备注',
					price: '89'
				}, {
					datetime: '2024-01-09 12:30',
					chewei: '4',
					startCity: '郑州市',
					startAddress: '正弘西悦城',
					endCity: '洛阳市',
					endAddress: '正弘西悦城',
					desc: '备注',
					price: '89'
				}],
			}
		},
		onShow() {
			if(this.currentIndex){
				
				this.tabsList=[
			
					{
						name: '全部',
						status: "0"
					},
				
					{
						name: '已预订',
						status: "1"
					},
					{
						name: '进行中',
						status: "2"
					},
					{
						name: '已完成',
						status: "3"
					},
					{
						name: '已取消',
						status: "4"
					},
				
				]
				this.orderList()
				
			}else{
				this.tabsList=[
					{
							name: '全部',
							status: "全部"
						},
						{
							name: '待接单',
							status: "10"
						},
					
						{
							name: '进行中',
							status: "20"
						},
						{
							name: '待支付',
							status: "30"
						},
						{
							name: '已完成',
							status: "40"
						},
						{
							name: '已取消',
							status: "50"
						},
					
					],
				this.getOrderList()
			}
		},
		onLoad(e) {
			if(e.currentIndex){
				this.currentIndex=e.currentIndex
			}
		},

		methods: {
			orderCancelClick(item) {
				var that = this
				var string = '是否确认取消?'

				uni.showModal({
					title: '提醒',
					content: string,
					success: function(res) {
						if (res.confirm) {
							that.orderCancelClick1(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			orderCancelClick1(item){
				var data = {
				id:item.id,
				remark:'临时有事'
				}
				orderCancel(data)
					.then(res => {
						this.showToast(res.msg)
						this.orderList()
					})
			},
			orderAboardClick(item){
				var data = {
				id:item.id,
		
				}
				orderAboard(data)
					.then(res => {
						this.showToast(res.msg)
						this.orderList()
					})
			},
			topTabClick(index) {
			
				this.currentIndex = index
				this.tabsIndex=0
			
				
				if(this.currentIndex){
					
					this.tabsList=[
				
						{
							name: '全部',
							status: "0"
						},
					
						{
							name: '已预订',
							status: "1"
						},
						{
							name: '进行中',
							status: "2"
						},
						{
							name: '已完成',
							status: "3"
						},
						{
							name: '已取消',
							status: "4"
						},
					
					]
					this.orderList()
					
				}else{
					this.tabsList=[
						{
								name: '全部',
								status: "全部"
							},
							{
								name: '待接单',
								status: "10"
							},
						
							{
								name: '进行中',
								status: "20"
							},
							{
								name: '待支付',
								status: "30"
							},
							{
								name: '已完成',
								status: "40"
							},
							{
								name: '已取消',
								status: "50"
							},
						
						],
					this.getOrderList()
				}
				// this.upCallback(this.mescroll);
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			itemClick(item) {
				if (this.currentIndex == 0) {
					uni.navigateTo({
						url: '/pages/index/orderDetail?order_id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/personalCenter/sfOrderDetail?order_id=' + item.id
					})
				}

			},
			orderList(){
				var data = {
					page: this.page,
					limit: this.size,
					status: this.tabsList[this.tabsIndex].status,
				}
				orderList(data)
					.then(res => {
						this.list = res.data.data
					})
			},
			getOrderList() {
				var data = {
					page: this.page,
					size: this.size,
					status: this.tabsList[this.tabsIndex].status,
				}
				getOrderList(data)
					.then(res => {
						this.list = res.data.data
					})
			},
			tabClick(e) {
				this.tabsIndex = e.index
				if(this.currentIndex){
					
					
					this.orderList()
					
				}else{
				
					this.getOrderList()
				}
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F6F7;
	}

	.headerBox {
		display: flex;
		justify-content: center;

		// background-color: #fff;
		.headder {
			z-index: 2;
			position: relative;
			width: 378rpx;
			// background: #FFFFFF;
			// border-radius: 30rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			border: 2rpx solid #26D360;

			.items {
				width: 188rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				position: relative;
				font-size: 34rpx;
				font-family: Source Han Serif CN, Source Han Serif CN;
				font-weight: 400;
				color: #26D360;

			}

			.active {
				font-size: 34rpx;
				font-family: Source Han Serif CN, Source Han Serif CN;
				font-weight: 600;
				background-color: #26D360;
				color: #ffffff;

			}

			.active::after {
				// content: "";
				//    width: 46px;
				//    height: 4px;
				// background: #F9524D;
				//    background-size: 100% 100%;
				// position: absolute;
				//    bottom: 6px;
				//    left: 50%;
				//    transform: translateX(-50%);
				width: 188rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				position: relative;
				font-size: 34rpx;
				font-family: Source Han Serif CN, Source Han Serif CN;
				font-weight: 400;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #ffffff;
				background-color: #26D360;


			}

		}
	}


	.orderView {
		padding: 30rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;

		.left {
			display: flex;
			justify-content: flex-start;

			.tag {
				width: 64rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: #26D360;
				border-radius: 8rpx;
				text-align: center;
				margin-right: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}


		.rightbtn {
			display: flex;
			justify-content: flex-start;

			.cancel {
				width: 196rpx;
				height: 60rpx;
				line-height: 60rpx;
				border: 2rpx solid #eee;

				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				border-radius: 30rpx;
				color: #797979;
				margin-left: 20rpx;

			}

			.done {
				width: 196rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #26D360;
				border-radius: 30rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-left: 20rpx;

			}
		}

	}

	.time {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.circle {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		background: #FF9500;
		opacity: 1;
		border-radius: 50%;
	}

	.circle1 {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		background: $base-color;
		opacity: 1;
		border-radius: 50%;
	}

	.title2 {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.state {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFB347;
	}

	.state1 {

		color: #666666;
	}

	.state2 {

		color: $base-color;
	}

	.timeView {
		margin: 0 30rpx;
		margin-top: 30rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
	}

	.time1 {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.time2 {
		margin-left: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9E9E9E;
	}
</style>